import { Avatar, Group, Menu, Text, UnstyledButton } from "@mantine/core";
import { IconChevronDown, IconLogout, IconSwitchHorizontal } from "@tabler/icons-preact";
import { Person } from "../../models/Persons";

const menu =
{
	viewURV: "Просмотр УРВ",
	addAbsence: "Добавить отсутствие"
}

export default function PrivateMenu({ person }: { person?: Person }) {
	const initials = `${person?.name[0]}${person?.name[person?.name.indexOf(" ") + 1]}`;
	return (
		<Menu
			width={260}
			position="bottom-start"
			transitionProps={{ transition: 'pop-top-left' }}
		>
			<Menu.Target>
				<UnstyledButton>
					<Group gap={8}>
						<Avatar radius="lg" size={30} variant="filled">
							{initials}
						</Avatar>
						<Text fw={500} size="sm" >
							{person?.name}
						</Text>
						<IconChevronDown size={16} />
					</Group>
				</UnstyledButton>
			</Menu.Target>

			<Menu.Dropdown>
				<Menu.Item>
					<Group>
						<IconSwitchHorizontal size={16} />
						<Text size="sm">
							{menu.viewURV}
						</Text>
					</Group>

				</Menu.Item>

				<Menu.Divider />

				<Menu.Item color='red'>
					<Group>
						<IconLogout size={16} />
						<Text size="sm">
							{menu.addAbsence}
						</Text>
					</Group>
				</Menu.Item>
			</Menu.Dropdown>
		</Menu>
	)
}
